<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<select name="province" id="province" v-model="provincedefault">
				<option v-for="item in province" :value="item.id" >{{item.name}}</option>
			</select>
			<select name="city" id="city">
				<option v-if="item.pid == provincedefault" v-for="item in city" :value="item.id">{{item.name}}</option>
			</select>
		</div>
	</body>
	
	<script>
		new Vue({
			el: "#app",
			data: {
				provincedefault: 1,
				province: [
					{id: 1, name: "湖南"},
					{id: 2, name: "湖北"},
					{id: 3, name: "河南"},
					{id: 4, name: "河北"},
				],
				city: [
					{id: 1, pid: 1, name: "永州"},
					{id: 2, pid: 1, name: "长沙"},
					{id: 3, pid: 1, name: "岳阳"},
					
					{id: 4, pid: 2, name: "武汉"},
					{id: 5, pid: 2, name: "荆洲"},
					{id: 6, pid: 2, name: "武昌"},
					
					{id: 7, pid: 3, name: "郑州"},
					{id: 8, pid: 3, name: "洛阳"},
					{id: 9, pid: 3, name: "开封"},
					
					{id: 10, pid: 4, name: "石家庄"},
					{id: 11, pid: 4, name: "山海关"},
					{id: 12, pid: 4, name: "保定"},
				]
			},
			methods: {
				
			}
		})
	</script>
	
</html>